<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('手动执行')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row" style="min-height:470px;text-align: center" id="tableDiv">
        <table id="tableExecList" class="table table-bordered">
            <thead></thead>
            <tbody></tbody>
        </table>
        <div id="chartDiv" style="width: 700px;height:470px;display: none;"></div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script>
    var showTableData = function (data) {
        var tbody = data.tbody;
        var thead = data.thead;
        var html="<tr>";
        var theads =[],theadsKey=[];
        $.each(thead,function(index,item) {
            html+="<th>"+item+"</th>";
            theads.push(item);
            theadsKey.push(index);
        });
        $("#tableExecList thead").html(html+"</tr>");
        html="";

        for(var i=0;i<tbody.length;i++) {
            html+="<tr>";
            var trData = tbody[i];
            for(var j=0;j<theadsKey.length;j++) {
                html+="<td>"+(trData[theadsKey[j]]==undefined?0:trData[theadsKey[j]])+"</td>";
            }
            html+="</tr>";
        }
        $("#tableExecList tbody").html(html);
    };
    function dataRefresh() {
        var chartType = $("#chartTypeSelect").val();
        var data = result.data;
        if(chartType=="table") {
            showTableData(data.data);
            $("#tableExecList").show();
            $("#chartDiv").hide();
        } else {
            var echartsInstance=echarts.init(document.getElementById("chartDiv"));
            echartsInstance.setOption(eval('(' + data.data + ')'));
            $("#tableExecList").hide();
            $("#chartDiv").show();
        }
    }
    $(function () {

    });
</script>
</body>
</html>